<template>
  <div>{{ objchild.name }}-{{ objchild.age }}</div>
  <button @click="handleChildClick">我是子组件1</button>
  <div>{{ content }}---</div>
  {{ chilsd }}
  <div>{{ title }}</div>
  <button @click="childClicks">我是子组件2</button>
  <div>
    {{ $parent.selected }}
    <el-button @click="$parent.selected += 10"
      >子组件修改父组件$parent第一种写法</el-button
    >
    <el-button @click="handlesgd($parent)"
      >子组件修改父组件$parent第二种写法</el-button
    >
  </div>
  <div>
    {{ age }}
  </div>
</template>

<script setup>
import { ref, onMounted, onUpdated } from "vue";
const props = defineProps({
  objchild: {
    ype: Object,
    default: () => {},
  },
  chilsd: {
    type: Number,
  },
});
const content = ref("我是子组件1");
const title = ref("我是子组件2");
const handleChildClick = () => {
  title.value = "修改子组件2";
};
let age = 500;
//defineExpose作用向外界暴漏一个对象，其他组件可以调用这个对象的属性和方法,不用defineExpose，其他组件拿不到这个组件的属性和方法
defineExpose({
  content, //向外暴漏的必须是响应式的对象ref或reactive 否则父组件修改content值的时候子组件的的content值不会更新
  handleChildClick,
  age,
});
const emits = defineEmits(["parentClick"]);
const childClicks = () => {
  emits("parentClick", "我是子组件传过来的");
  props.objchild.name = "123"; //报警高 objchild is readonly不能修改
};
// onMounted(() => {
//   content.value = props.chilsd;
// });
// onUpdated(() => {
//   content.value = props.chilsd;
//   console.log(12364000000);
// });
const handlesgd = (parent) => {
  parent.selected -= 10;
};
</script>

<style scoped></style>
